<template>
	<div class="content">
		<mt-header fixed :title='coursename+"专项练习"' class="heade" style="background-color: #FA8C13;">
    	<mt-button icon="back" slot="left" @click="back"></mt-button>	
		</mt-header>
		<div class="container">
			<div v-for="x in knowledgeList" @click="chooseCode(x)">
				<div class="left">
					<div class="top">
						{{ x.categoryname||x.name }}
						<span>{{ x.count=='-1'||!x.counted?'尚未开始':x.counted+'/'+x.count }}</span>
					</div>
					<div class="bottom">
						<div class="yellow" v-show="x.counted" :style="{width:100*(x.counted/x.count)+'%'}" :class="{full:x.counted==x.count}"></div>
						
					</div>
					
				</div><div class="right"></div> 
			</div>
		</div>
		<div class="foot" @click="autoExercise">
			智能练习
		</div>
	</div>
</template>

<script>
import FooterMsg from '../../components/FooterMsg'
import HeaderMsg from '../../components/Header'
import api from '../../api'
import { mapState, mapMutations } from 'vuex'
import $ from 'jquery'
import { Indicator,Toast } from 'mint-ui';
export default {
	data() {
		return {
			knowledgeList: [],
			coursename: ''
		}
	},
	activated() {
		this.INIT_STATE();
		var that = this;
		this.coursename = this.$route.params.coursename

                console.log(this)
		//先走我方后台接口如果没有那么走跨学接口获取知识点目录后传给我方后台
		api.getStudentPracticeOfCourse({
			studentid:this.userlogin.uid,
			courseid:this.$route.params.courseid
		}).then(response=>{
			if(response.data.ret=='2'){				
				api.getKnowledges({
					'subject_id': that.$route.params.subjectid,
					'type': 1
				}).then(response => {
					that.knowledgeList = response.data.datalist[0].son
					//给后台传递的数据只需要结构id和结构name
					var arr=[]
					that.knowledgeList.forEach(function(v,i){
						arr.push({
							'name':encodeURI(v.name),
							'id':v.id
						})
					})
					api.addStudentPracticeOfCourse({
						studentid:that.userlogin.uid,
						courseid:that.$route.params.courseid,
						categorylist:JSON.stringify(arr)
					}).then(response=>{
						console.log(response)
					})
				})
			}else if(response.data.ret=='1'){
				that.knowledgeList=response.data.data
			}else{
				console.err(rsponse.data.msg)
			}
		})
		$(function() {
			var h = document.body.clientHeight;
			$('.content').css('min-height', h - 44 - 50 + 'px')
		})
	},
	computed: {
		...mapState(['userlogin','exerciseInfo'])
	},
	methods: {
		...mapMutations(['INIT_STATE','EXERCISE_ADD']),
		chooseCode(x){
			if(x.counted==x.count){
				Toast('恭喜您已做完所有题目啦')
			}else{
			this.EXERCISE_ADD({
					source_url:'/studydiagCodedetail/'+this.$route.params.subjectid+'/'+this.$route.params.courseid+'/'+this.$route.params.coursename,
					category_id: x.categoryid,
					level_id: 0,//全部难易度
					courseid: this.$route.params.courseid,
					typeid: 3,//选择题
					page:Number(x.page),
					counting:Number(x.counting),
					coursename: this.$route.params.coursename
				});
				this.$router.push({
					path: '/exercise'
				})
				
			}
		},
		autoExercise(){
			var arr=this.knowledgeList.filter(function(x){return x.counted!=x.count})
			var randomIndex=parseInt(Math.random()*arr.length)
			this.chooseCode(arr[randomIndex])
		},
		back(){
			window.history.back()
		}
	}
}
</script>

<style scoped>
	div{
		box-sizing: border-box;
	}
.container {
	padding: 0 20px;
}

.container>div {
	width: 100%;
	margin-top: 20px;
	height: 69px;
	background-color: white;
	text-align: left;
	display: flex;
}
.container>div>.left{
	flex: 6;
	height: 100%;
	padding-left: 0.14rem;
}
.container>div>.right{
	flex: 4;
	height: 100%;
	background: url(../../assets/images/exercise.png) no-repeat center 13px;
	background-size: 80%;
}
.container>div>.left>.top{
font-size: 15px;
color: #3C3C3C;
line-height: 43px;
	
}
.container>div>.left>.top>span{
	font-size: 12px;
color: #999999;
	
}
.container>div>.left>.bottom{
	width: 2.4rem;
	position: relative;
	height: 12px;
	border-radius: 4px;	
		background: #D8D8D8;
}
.container>div>.left>.bottom>.yellow{
	position: absolute;
	background: #FA8C13;
		border-radius: 4px;
		height: 100%;
	max-width: 100%;
	
}
.container>div>.left>.bottom>.yellow.full{	
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}
.container>div>.left>.bottom>.grey{
	width: 100%;
	background: #D8D8D8;	
	border-radius: 6px;
	
}
.foot {
	background: #FA8C13;
	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.30);
	width: 100%;
	height: 50px;
	text-align: center;
	color: white;
	line-height: 50px;
	position: fixed;
	bottom: 0;
	font-size: 16px;
}</style>